<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引入jQuery -->
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/color.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
    <script src="../public/jquery.serializejson.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div data-options="region:'center',title:'内容区',iconCls:'icon-ok'">
        <table id="dg" style="height:450px"></table>
        <div id="dlg" class="easyui-dialog" title="产品模块" data-options="closed:true,iconCls:'icon-save'" style="width:400px;height:450px;padding:10px">
            <div class="easyui-panel" title="" style="width:100%;max-width:400px;padding:0px 60px;">
                <form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
                    <div style="margin-bottom:20px">
                        <input name="_id" style="width:100%;display: none">
                    </div>
                    <div style="margin-bottom:20px">
                        <input class="easyui-textbox" name="productname" style="width:100%" data-options="label:'产品名:',required:true">
                    </div>
                    <div style="margin-bottom:20px">
                        <input class="easyui-textbox" name="collections" style="width:100%" data-options="label:'库存量:',required:true">
                    </div>
                    <div style="margin-bottom:20px">
                        <input class="easyui-textbox" name="like" style="width:100%" data-options="label:'销售量:',required:true">
                    </div>
                    <div style="margin-bottom:20px">
                        <input class="easyui-textbox" name="price" style="width:100%" data-options="label:'价格:',required:true">
                    </div>
                    <div style="margin-bottom:20px">
                        <input id="dd" class="easyui-datebox" name="date" required="required" label="上架日期:" style="width:200px"
                            panelWidth="200">
                    </div>
                    <div style="margin-bottom:20px">
                        <input id="rb1" class="easyui-radiobutton" name="postage" label="包邮:" labelWidth="45">
                        <input id="rb2" class="easyui-radiobutton" name="postage" label="不包邮:" labelWidth="60">
                    </div>
                    <div style="margin-bottom:20px">
                        <input id="ck1" class="easyui-checkbox" name="class[]" label="春:" labelWidth="30">
                        <input id="ck2" class="easyui-checkbox" name="class[]" label="夏:" labelWidth="30">
                        <input id="ck3" class="easyui-checkbox" name="class[]" label="秋:" labelWidth="30">
                        <input id="ck4" class="easyui-checkbox" name="class[]" label="冬:" labelWidth="30">
                    </div>
                    <div style="margin-bottom:20px">
                        <input id="dk1" class="easyui-checkbox" name="suit[]" label="男:" labelWidth="25">
                        <input id="dk2" class="easyui-checkbox" name="suit[]" label="女:" labelWidth="25">
                        <input id="dk3" class="easyui-checkbox" name="suit[]" label="成年:" labelWidth="40">
                        <input id="dk4" class="easyui-checkbox" name="suit[]" label="儿童:" labelWidth="40">
                    </div>
                </form>
                <div style="text-align:center;padding:5px 0">
                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">提交</a>
                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">取消</a>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

<script>
    function submitForm() {
        $('#ff').form('submit', {
            onSubmit: function () {
                if ($(this).form('enableValidation').form('validate')) {
                    var formData = $("#ff").serializeJSON();

                    if (formData._id) {
                        $.ajax({
                            url: `http://localhost:3000/products/${formData._id}`,
                            type: 'put',
                            data: formData
                        }).done(res => {
                            $('#dlg').dialog('close');
                            $('#dg').datagrid('reload');
                            clearForm()
                        })
                    } else {
                        delete formData._id;
                        $.ajax({
                            url: 'http://localhost:3000/products',
                            type: 'post',
                            data: formData
                        }).done(res => {
                            $('#dlg').dialog('close');
                            $('#dg').datagrid('reload');
                            clearForm()
                        })
                    }
                }
            }
        });
    }

    function clearForm() {
        $('#ff').form('clear');
    }

    function deleteData(id) {
        $.messager.confirm('确认对话框', '你确认删除数据吗？', function (r) {
            if (r) {
                $.ajax({
                    url: `http://localhost:3000/products/${id}`,
                    type: 'delete'
                }).done(res => {
                    $('#dg').datagrid('reload')
                })
            }
        })
    }


    function editData(id) {
        $.ajax({
            url: `http://localhost:3000/products/${id}`,
            type: 'get'
        }).done(res => {
            $('#dlg').dialog('open');
            $('#ff').form('load', res)

        })
    }

    function removes() {
        $.messager.confirm('确认对话框', '你确认删除数据吗？', function (r) {
            if (r) {
                var dgSelections = $("#dg").datagrid('getSelections');
                var ids = [];
                for (var i = 0; i < dgSelections.length; i++) {
                    ids.push(dgSelections[i]._id);
                }
                $.ajax({
                    url: 'http://localhost:3000/products/removes',
                    type: 'post',
                    data: {
                        ids: ids.toString()
                    }
                }).then(res => {
                    $('#dg').datagrid('reload')
                })
            }
        })
    }


    $('#dg').datagrid({
        url: 'http://localhost:3000/products/list',
        border: false,
        pagination: true,
        toolbar: [{
                text: '添加',
                iconCls: 'icon-add',
                handler: function () {
                    $('#dlg').dialog('open');
                    clearForm()
                }
            },
            {
                text: '删除',
                iconCls: 'icon-cut',
                handler: function () {
                    removes()
                }
            }
        ],
        columns: [
            [{
                    field: 'ck',
                    checkbox: true
                },
                {
                    field: 'productname',
                    title: '产品名',
                    width: 100,
                    align: 'left'
                },
                {
                    field: 'collections',
                    title: '库存',
                    width: 80,
                    align: 'right'
                },
                {
                    field: 'like',
                    title: '销售量',
                    width: 80,
                    align: 'right'
                },
                {
                    field: 'price',
                    title: '价格',
                    width: 80,
                    align: 'right',
                    formatter: function (value, row, index) {
                        if (value) {
                            return value + '元';
                        } else {
                            return 999999 + '元';
                        }
                    }
                },
                {
                    field: 'date',
                    title: '上架日期',
                    width: 150,
                    align: 'center'
                },
                // {field:'sex',title:'性别',fit:true,
                // formatter: function(value,row,index){
                // 		if (value){
                // 			return '女';
                // 		} else {
                // 			return '男';
                // 		}
                // 	}
                // },
                {
                    field: 'postage',
                    title: '包邮',
                    width: 100,
                    align: 'center'
                },
                {
                    field: 'class',
                    title: '类别',
                    width: 150,
                    align: 'center'
                },
                {
                    field: 'suit',
                    title: '适合人群',
                    width: 150,
                    align: 'center'
                },
                {
                    field: '_id',
                    title: '操作',
                    width: 100,
                    align: 'center',
                    formatter: function (value, row, index) {
                        return `<a href="javascript:void(0)" onclick="editData('${value}')">修改</a>    <a href="javascript:void(0)" onclick="deleteData('${value}')">删除</a>`
                    }
                }
            ]
        ]
    });
    $('#rb1').radiobutton({
        label: '包邮:',
        value: '包邮',
        checked: true
    });
    $('#rb2').radiobutton({
        label: '不包邮:',
        value: '不包邮',
        checked: false
    });
    $('#ck1').checkbox({
        label: '春:',
        value: '春',
        checked: false
    });
    $('#ck2').checkbox({
        label: '夏:',
        value: '夏',
        checked: false
    });
    $('#ck3').checkbox({
        label: '秋:',
        value: '秋',
        checked: false
    });
    $('#ck4').checkbox({
        label: '冬:',
        value: '冬',
        checked: false
    });

    $('#dk1').checkbox({
        value: '男',
        checked: false
    });
    $('#dk2').checkbox({
        value: '女',
        checked: false
    });
    $('#dk3').checkbox({
        value: '成人',
        checked: false
    });
    $('#dk4').checkbox({
        value: '儿童',
        checked: false
    });
</script>